<template>
    <header>
     <div class="header">
       <div class="header-letf"><</div>
       <div class="header-zhong"><input type="text" placeholder="请输入"></div>
       <div class="header-right">北京</div>
     </div>
     
    </header>
</template>
<script>
export default {
    
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.header{
   
    width: 100%;
    height: 100%;
    display: flex;
    
    font-size: 14px;
    background:  #F4F4F4;
    position: sticky;
    top: 0;
    background: lightseagreen

}
    

.header-letf{
        display: flex;
        flex:2 ;
       
    }
.header-zhong{
           display: flex;
          flex: 6; 
        display: flex;
       justify-content: center;
       align-items: center;
        
    }
    input{
            border-radius: 10px;
            border: 0;
        }
.header-right{
     margin-left:50px;
     display: flex;
     flex: 2;
      
    }
  

</style>
